<template>
  <div class="order-detail-container">
    <el-page-header @back="$router.go(-1)">
      <template #content>
        <span class="text-large font-600 mr-3">订单详情</span>
      </template>
    </el-page-header>

    <el-skeleton :rows="6" animated v-if="loading" />
    <el-alert v-if="error" type="error" :title="error.message" show-icon />

    <div v-if="orderData" class="detail-content">
      <el-descriptions title="基本信息" border :column="2">
        <el-descriptions-item label="订单编号">{{ orderData.order_id }}</el-descriptions-item>
        <el-descriptions-item label="下单时间">{{ formatDateTime(orderData.order_create_time) }}</el-descriptions-item>
        <el-descriptions-item label="商品名称">{{ orderData.product_name }}</el-descriptions-item>
        <el-descriptions-item label="商品数量">{{ orderData.quantity }}件</el-descriptions-item>
        <el-descriptions-item label="总金额">¥{{ orderData.order_total_amount.toFixed(2) }}</el-descriptions-item>
      </el-descriptions>

      <el-descriptions title="商品信息" border style="margin-top:20px">
        <el-descriptions-item label="商品图片">
          <el-image 
            :src="apiBase + '/product_images/' + orderData.product_image"
            fit="contain"
            style="width:200px;height:200px"
          />
        </el-descriptions-item>
      </el-descriptions>

      <el-descriptions title="收货信息" border style="margin-top:20px" :column="1">
        <el-descriptions-item label="收货人">{{ deliveryInfo.receiver }}</el-descriptions-item>
        <el-descriptions-item label="联系电话">{{ deliveryInfo.mobile }}</el-descriptions-item>
        <el-descriptions-item label="所在地区">
          {{ deliveryInfo.region.province }}{{ deliveryInfo.region.city }}{{ deliveryInfo.region.district }}
        </el-descriptions-item>
        <el-descriptions-item label="详细地址">{{ deliveryInfo.detail }}</el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { useRoute } from 'vue-router';
import axios from 'axios';
import { ElMessage } from 'element-plus';

const apiBase = ref(import.meta.env.VITE_API_BASE || '');
const route = useRoute();
const orderData = ref(null);
const loading = ref(true);
const error = ref(null);

const deliveryInfo = computed(() => {
  try {
    return JSON.parse(orderData.value.delivery_info);
  } catch (e) {
    return { receiver: '', mobile: '', region: {}, detail: '' };
  }
});

const formatDateTime = (dateStr) => {
  return new Date(dateStr).toLocaleString();
};

const fetchOrderDetail = async () => {
  try {
    const response = await axios.get(`${apiBase.value}/order/${route.params.orderId}`);
    orderData.value = response.data;
  } catch (err) {
    error.value = {
      message: '获取订单详情失败：' + (err.response?.data?.message || err.message)
    };
    ElMessage.error(error.value.message);
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
  fetchOrderDetail();
});
</script>

<style scoped>
.order-detail-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}
.detail-content {
  margin-top: 20px;
}
</style>